﻿<Page x:Class="WpfAnimation.PageAnimationUsingKeyframes_KeyTime"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
    d:DesignHeight="350" d:DesignWidth="880"
	Title="PageAnimationUsingKeyframes_KeyTime">
    <Canvas>
        <Canvas.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Width" Value="140" />
                <Setter Property="Height" Value="50" />
                <Setter Property="Background" Value="LightCyan" />
            </Style>
        </Canvas.Resources>
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="button1">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimationUsingKeyFrames  Duration="00:00:5" Storyboard.TargetName="tb1" Storyboard.TargetProperty="(Canvas.Left)" >
                            <LinearDoubleKeyFrame Value="100" KeyTime="00:00:01" />
                            <LinearDoubleKeyFrame Value="300" KeyTime="00:00:02" />
                            <LinearDoubleKeyFrame Value="400" KeyTime="00:00:04" />
                            <LinearDoubleKeyFrame Value="600" KeyTime="00:00:05" />
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames Duration="00:00:5" Storyboard.TargetName="tb2" Storyboard.TargetProperty="(Canvas.Left)" >
                            <LinearDoubleKeyFrame Value="100" KeyTime="10%" />
                            <LinearDoubleKeyFrame Value="300" KeyTime="80%" />
                            <LinearDoubleKeyFrame Value="400" KeyTime="90%" />
                            <LinearDoubleKeyFrame Value="600" KeyTime="100%" />
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames   Duration="00:00:5" Storyboard.TargetName="tb3" Storyboard.TargetProperty="(Canvas.Left)" >
                            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
                            <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" />
                            <LinearDoubleKeyFrame Value="400" KeyTime="Uniform" />
                            <LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames  Duration="00:00:5" Storyboard.TargetName="tb4" Storyboard.TargetProperty="(Canvas.Left)" >
                            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
                            <LinearDoubleKeyFrame Value="300" KeyTime="Paced" />
                            <LinearDoubleKeyFrame Value="400" KeyTime="Paced" />
                            <LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        <TextBlock x:Name="tb1"  Canvas.Top="60"  Canvas.Left="10" Text="KeyTime:Normal"/>
        <TextBlock x:Name="tb2"  Canvas.Top="120"  Canvas.Left="10" Text="KeyTime:percent"/>
        <TextBlock x:Name="tb3"  Canvas.Top="180"  Canvas.Left="10" Text="KeyTime:Uniform"/>
        <TextBlock x:Name="tb4"  Canvas.Top="250"  Canvas.Left="10" Text="KeyTime:Paced"/>
        
        <Rectangle Width="1" Height="400" Canvas.Left="100" Stroke="Red" StrokeThickness="1" />
        <Rectangle Width="1" Height="400" Canvas.Left="300" Stroke="Red" StrokeThickness="1" />
        <Rectangle Width="1" Height="400" Canvas.Left="400" Stroke="Red" StrokeThickness="1" />
        <Rectangle Width="1" Height="400" Canvas.Left="600" Stroke="Red" StrokeThickness="1" />
        
        
        <Button Canvas.Left="23" Canvas.Top="20" Content="Go" Height="23" Name="button1" Width="75" />
    </Canvas>
</Page>
